<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XMLHttpRequest 2.0 中的 文件上传</title>
</head>
<body>
    <div id="content"></div>
    <button onclick="sendAjax()">GET</button>
    <button onclick="getNewAjax()">POST</button>
    <a href="http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html">资料参考网址</a>
    
    <script>

        // 以下是 XMLHttpRequest1 的使用方式，但是它存在以下不足
        // 1: 只支持文本数据的传送，无法用来上传和读取二进制文件（也就是说无法上传和获取文件）
        // 2：传送和接收数据时，没有进度信息，只能提示是否完成
        // 3：受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。
        function sendAjax() {
            var xmlhttp = new XMLHttpRequest()

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById('content').innerHTML = xmlhttp.responseText
                }
            }

            xmlhttp.open('GET', 'http://localhost:3000/email', true)
            xmlhttp.setRequestHeader('Name', 'Jacob') // 必须放在 open 后，send前
            xmlhttp.send()
        }


        // XMLHttpRequest 2.0 增加了很多新功能
        // 设置HTTP的请求时限 -- 超时的话进行回掉处理
        // 可以使用 FormData 管理表单数据
        // 可以上传文件 （Blob和File），通过上面的 FormData
        // 可以获取服务器端的二进制数据
        // 可以获得 数据传输的进度信息 （上传和下载）
        function getNewAjax() {
            var xmlhttp = new XMLHttpRequest()

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById('content').innerHTML = xmlhttp.responseText
                }
            }

            // 设置请求时长限制
            xmlhttp.timeout = 30000
            xmlhttp.ontimeout = function () {
                alert('您的请求已超时！')
            }

            // 利用 FormData 上传文件
            const form = document.getElementById('form')
            const formData = new FormData(form)

            // 获取上传和下载的进度信息
            // 下载的progress是属于 XMLHttpRequest 对象上的
            xmlhttp.onprogress = getProgressMsg
            // 上传的progress是属于 XMLHttpRequest.upload 对象上的
            xmlhttp.upload.onprogress = getProgressMsg

            // 其他的一些事件
            // xmlhttp.onload,xmlhttp.onabort,xmlhttp.onerror 可以监测 文件下载
            xmlhttp.upload.onload = function () {
                console.log('文件上传完成！')
            }
            xmlhttp.upload.onabort = function () {
                console.log('文件上传已取消！')
            }
            xmlhttp.upload.onerror = function () {
                console.log('文件上传出现错误！')
            }

            xmlhttp.open('POST', 'http://localhost:3000/email', true)
            xmlhttp.send(formData) // 可以上传 File/Blob 等文件啦
        }


        // 如果event.lengthComputable不为真，则event.total等于0
        // event.loaded 已经传输的字节
        // event.total 需要传输的总字节
        function getProgressMsg(event) {
            if (event.lengthComputable) {
                var percentComplete = event.loaded / event.total
                console.log(percentComplete)
            }
        }
    </script>
</body>
</html>